<template>
  <div class="quickReply">
    <el-input
      placeholder="请输入关键词模糊搜索"
      suffix-icon="el-icon-search"
      @change="searchFun"
      v-model="keyWord">
    </el-input>
    <el-button size="small" class="tabBtn commonBtn"
      :class="{activeTab: activeName === 'common'}" @click="tabFun('common')">公共常用语
    </el-button>
    <el-button size="small" class="tabBtn agentBtn"
      :class="{activeTab: activeName === 'agent'}" @click="tabFun('agent')">个人常用语
    </el-button>
    <div v-show="treeData.length === 0" class="noData">暂无数据</div>
    <quickReplyTree class="tree" :treeData="treeData" :type="activeName"></quickReplyTree>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { WebchatModule } from '@/store/modules/webchat'
import quickReplyTree from '@/views/webchat/common/quickReplyTree.vue'
@Component({
  name: 'quickReply',
  components: { quickReplyTree }
})
export default class QuickReply extends Vue {
  private keyWord = ''

  private treeData = []

  private activeName = 'common'

  private tabFun (type: string) {
    this.activeName = type
    this.getTreeData()
  }

  private searchFun () {
    this.getTreeData()
  }

  private getTreeData () {
    const actionData = {
      url: '/im-km/quick-reply/action/quickquery/content/query',
      method: 'POST',
      data: { type: this.activeName, keyWord: this.keyWord }
    }
    WebchatModule.webchatCommonAction(actionData).then(res => {
      this.treeData = res.data || []
    })
  }

  private mounted () {
    this.getTreeData()
  }
}
</script>
<style lang="stylus" scoped>
  .quickReply
    padding-right 16px
    .tabBtn
      background #F5F5F5
      color #767E91
      border 1px solid #F5F5F5
      margin 10px 0px
    .activeTab
      background #E0F0FC
      color #008BEE
      border 1px solid #008BEE
    .commonBtn
      margin-right 10px
    .tree
      height calc(100% - 110px)
      overflow-y auto
    .noData
      text-align center
      margin-top 20px
</style>
